<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:replace="~{common/base :: layout(~{::title}, ~{::content}, ~{::style}, ~{::script})}">
<head>
    <title>管理后台 - 优选商城</title>
    <style th:fragment="styles">
        .admin-card {
            transition: all 0.3s ease;
            border: none;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .admin-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        .admin-card .card-body {
            padding: 2rem;
        }
        .admin-card .icon {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }
        .admin-card .card-title {
            font-size: 1.25rem;
            margin-bottom: 0.5rem;
        }
        .admin-card .card-text {
            color: #6c757d;
        }
    </style>
</head>
<body>
    <div th:fragment="content">
        <div class="container py-5">
            <h2 class="mb-4">管理后台</h2>
            <div class="row g-4">
                <!-- 商品管理 -->
                <div class="col-md-4">
                    <div class="card admin-card">
                        <div class="card-body text-center">
                            <div class="icon text-primary">
                                <i class="bi bi-box-seam"></i>
                            </div>
                            <h5 class="card-title">商品管理</h5>
                            <p class="card-text">管理商品信息、库存和价格</p>
                            <a href="/admin/products" class="btn btn-primary">进入管理</a>
                        </div>
                    </div>
                </div>
                
                <!-- 分类管理 -->
                <div class="col-md-4">
                    <div class="card admin-card">
                        <div class="card-body text-center">
                            <div class="icon text-success">
                                <i class="bi bi-grid"></i>
                            </div>
                            <h5 class="card-title">分类管理</h5>
                            <p class="card-text">管理商品分类和目录结构</p>
                            <a href="/admin/categories" class="btn btn-success">进入管理</a>
                        </div>
                    </div>
                </div>
                
                <!-- 订单管理 -->
                <div class="col-md-4">
                    <div class="card admin-card">
                        <div class="card-body text-center">
                            <div class="icon text-warning">
                                <i class="bi bi-cart"></i>
                            </div>
                            <h5 class="card-title">订单管理</h5>
                            <p class="card-text">查看和处理订单信息</p>
                            <a href="/admin/orders" class="btn btn-warning">进入管理</a>
                        </div>
                    </div>
                </div>
                
                <!-- 用户管理 -->
                <div class="col-md-4">
                    <div class="card admin-card">
                        <div class="card-body text-center">
                            <div class="icon text-info">
                                <i class="bi bi-people"></i>
                            </div>
                            <h5 class="card-title">用户管理</h5>
                            <p class="card-text">管理用户账号和信息</p>
                            <a href="/admin/users" class="btn btn-info">进入管理</a>
                        </div>
                    </div>
                </div>
                
                <!-- 数据统计 -->
                <div class="col-md-4">
                    <div class="card admin-card">
                        <div class="card-body text-center">
                            <div class="icon text-danger">
                                <i class="bi bi-graph-up"></i>
                            </div>
                            <h5 class="card-title">数据统计</h5>
                            <p class="card-text">查看销售和运营数据</p>
                            <a href="/admin/statistics" class="btn btn-danger">查看统计</a>
                        </div>
                    </div>
                </div>
                
                <!-- 系统设置 -->
                <div class="col-md-4">
                    <div class="card admin-card">
                        <div class="card-body text-center">
                            <div class="icon text-secondary">
                                <i class="bi bi-gear"></i>
                            </div>
                            <h5 class="card-title">系统设置</h5>
                            <p class="card-text">配置系统参数和选项</p>
                            <a href="/admin/settings" class="btn btn-secondary">进入设置</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <th:block th:fragment="scripts">
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const cards = document.querySelectorAll('.admin-card');
                cards.forEach(card => {
                    card.addEventListener('mouseenter', function() {
                        this.style.transform = 'translateY(-5px)';
                    });
                    card.addEventListener('mouseleave', function() {
                        this.style.transform = 'translateY(0)';
                    });
                });
            });
        </script>
    </th:block>
</body>
</html> 